<template>
  <div>
    <h2>机器状态预测</h2>
    <el-button type="primary" @click="fetchPredictions" :loading="isPredicting">
      {{ isPredicting ? '预测中...' : '刷新并预测' }}
    </el-button>

    <el-alert v-if="isPredicting" type="info" :closable="false" style="margin-top: 16px;">
      等待 AI 模型预测中...
    </el-alert>

    <div class="machine-list" v-if="machines.length > 0">
      <el-card v-for="machine in machines" :key="machine.id" class="machine-card" shadow="hover">
        <div class="machine-info">
          <h3>{{ machine.name }}</h3>
          <p><strong>ID : </strong> {{ machine.id }}</p>
          <p><strong>编号 : </strong> {{ machine.number }}</p>
          <p><strong>类型 : </strong> {{ machine.type }}</p>
          <p>
            <strong>状态 : </strong>
            <el-tag :type="getStatusTagType(machine.status)">{{ machine.status }}</el-tag>
          </p>
          <p><strong>使用次数 : </strong> {{ machine.usageCount }}</p>
          <p><strong>注册时间 : </strong> {{ machine.registerTime }}</p>
        </div>
        <div class="prediction-section">
          <h4>AI 预测结果</h4>
          <div v-if="machine.prediction" class="markdown-content" v-html="renderMarkdown(machine.prediction)" />
          <el-empty v-else description="未预测" :image-size="100" />
        </div>
      </el-card>
    </div>
    <el-empty v-else description="暂无机器数据" />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import axios from '@/plugins/axios';
import { ElMessage } from 'element-plus';
import { marked } from 'marked';

// 数据状态
const machines = ref<any[]>([]);
const isPredicting = ref(false);

// 处理转义字符
const formatPrediction = (text: string) => {
  return text
    .replace('\\n', '\n')  // 将 \\n 替换为换行
    .replace('\\t', '\t'); // 将 \\t 替换为制表符
};

// 获取机器列表（不含预测）
const fetchMachineList = async () => {
  try {
    const response = await axios.post('/machine/list', {});
    if (response.data.code === 200) {
      machines.value = response.data.data.map((item: any) => ({
        ...item,
        prediction: item.prediction || '',
      }));
    } else {
      ElMessage.error(response.data.message);
    }
  } catch (error) {
    ElMessage.error('获取机器列表失败');
  }
};

// 获取 AI 预测结果
const fetchPredictions = async () => {
  isPredicting.value = true;
  try {
    const response = await axios.get('/machine/predict');
    if (response.data.code === 200) {
      machines.value = formatPrediction(response.data.data);
      console.log(machine.value)
      ElMessage.success('预测完成');
    } else {
      ElMessage.error(response.data.message);
    }
  } catch (error) {
    ElMessage.error('获取预测结果失败');
  } finally {
    isPredicting.value = false;
  }
};

// 根据状态返回标签颜色
const getStatusTagType = (status: string) => {
  if (status === 'NORMAL') return 'success';
  if (status === 'PREDICTED_FAULT') return 'warning';
  if (status === 'FAULT') return 'danger';
  return '';
};

// 渲染 Markdown
const renderMarkdown = (text: string) => {
  return marked(text);
};

// 页面加载时获取机器列表
onMounted(() => {
  fetchMachineList();
});
</script>

<style scoped>
.machine-list {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.machine-card {
  width: 100%;
  max-width: 800px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}

.machine-info {
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
}

.machine-info h3 {
  margin: 0 0 10px;
  font-size: 20px;
}

.machine-info p {
  margin: 8px 0;
}

.prediction-section {
  padding-top: 16px;
}

.prediction-section h4 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #409eff;
}

.markdown-content {
  min-height: 200px;
  overflow-y: auto;
}
</style>